<template lang="pug">
  div(class="menu-index")
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column h3")
            div(class="flex-column-item under-line" ) 
              div(class="flex-row")
                div(class="flex-row-item flex-center-center flex-3") ---主菜单---
                div(class="flex-row-item") {{activeId + 1}}/{{menus.length}}
            div(class="flex-column-item flex-center ",
                v-for="menu in currentPageMenus",
                :class="{'selected-text': menu.id == activeId ? true: false}") {{menu.name}}                
        control-dialog(title="按↓键", sub-title="暂停输注!",:visible="visible",ref="dialog")
</template>

<script>
import MenuList from "@/mixins/MenuList";
export default {
  mixins: [MenuList],
  data() {
    return {
      menus: [
        { name: "1.大剂量", id: 0, to: "/large-dose/menu" },
        { name: "2.基础率", id: 1, to: "/base-rate" },
        { name: "3.装药排气", id: 2, to: "/charge-exhuast" },
        { name: "4.输注暂停", id: 3, cb: true },
        { name: "5.机器设置", id: 4, to: "/machine-setting" },
        { name: "6.高级设置", id: 5, to: "/advance-setting" }
      ],
      page: { maxResultCount: 3, skipCount: 0 },
      visible: false
    };
  },
  computed: {
    currentPageMenus() {
      var start = this.skipCount;
      var end = this.skipCount + this.page.maxResultCount;
      return this.menus.slice(start, end);
    }
  },
  methods: {
    up() {
      if (this.visible) return;

      if (this.activeId == 0) {
        this.activeId = this.menus[this.menus.length - 1].id;
      } else {
        this.activeId = this.activeId - 1;
      }
    },
    down() {
      if (this.visible) {
        window.dose.infusionStopped = true;
        window.dose.infusionStopAt = new Date();
        this.$router.push("/");
        return;
      }

      if (this.activeId == this.menus[this.menus.length - 1].id) {
        this.activeId = 0;
      } else {
        this.activeId = this.activeId + 1;
      }
    },

    back() {
      if (this.visible) {
        this.visible = false;
        return;
      }
      this.$router.push("/index");
    },
    yes() {
      if (this.visible) {
        this.visible = false;
        return;
      }
      var active = this.menus.find(menu => {
        return menu.id == this.activeId;
      });
      if (active.cb) {
        this.visible = true;
        return;
      }
      this.$router.push(active.to);
    }
  }
};
</script>

<style lang="less">
</style>
